<p-messages [(value)]="msg"></p-messages>
<div class="content-section implementation GridDemo" id="MalfunctionAdd" >
  <div class="title col-sm-12">
    <div class="col-sm-1">
      <span>创建故障单</span>
    </div>
    <div class="col-sm-11 pull-right">
      <button type="button"
              class="pull-right"
              pButton
              [routerLink]="['/index/maintenance/malfunctionBase']"
              icon="fa-close"
              style="width: 30px"></button>
    </div>
  </div>
  <form [formGroup]="myForm" class="form-horizontal">
    <div class="form-group">
      <label class="col-sm-1 control-label">服务单号：</label>
      <div class="col-sm-3 ui-fluid-no-padding">
        <input type="text"
               class=" form-control cursor_not_allowed"
               pInputText
               placeholder="自动生成"
               [(ngModel)]="malfNumber"
               readonly formControlName="malfNumber"/>
      </div>
      <label class="col-sm-1 control-label">来源：</label>
      <div class="col-sm-3  ui-fluid-no-padding ui-fluid">
        <p-dropdown [options]="malSourceOptins"
                    [(ngModel)]="malSource"
                    placeholder="请选择来源"
                    optionLabel="name"
                    formControlName="malSource"
                    [style]="{'width':'100%'}"
        ></p-dropdown>
      </div>
      <label class="col-sm-1 control-label">状态：</label>
      <div class="col-sm-3  ui-fluid-no-padding ">
        <input type="text" pInputText
               placeholder="新建"
               class=" form-control cursor_not_allowed"
               [(ngModel)]="malStatus"
               readonly
               formControlName="malStatus"/>
      </div>
    </div>
    <div class="form-group ">
      <label  class="col-sm-1 control-label">
        <span ngClass="start_red">*</span>
        报告人：
      </label>
      <div class="col-sm-3 ui-fluid-no-padding">
        <div class="col-sm-6 ui-fluid ui-fluid-no-padding">
          <input type="text" pInputText
                 placeholder="请选择报告人"
                 [(ngModel)]="reporter.name"
                 readonly
                 formControlName="reporterLabel"
                 class=" form-control cursor_not_allowed"
          />
        </div>
        <div class="col-sm-3 ui-fluid-no-padding ui-padding-10px">
          <button  ngClass="ui-g-12 ui-fluid-no-padding"  pButton type="button" (click)="showTreeDialog('reporter')" label="选择"></button>
        </div>
        <div class="col-sm-3 ui-fluid-no-padding ui-padding-10px">
          <button  ngClass="ui-g-12 ui-fluid-no-padding"  pButton type="button" (click)="clearTreeDialog('reporter')" label="清空"></button>
        </div>
      </div>
      <label  class="col-sm-1 control-label">组织：</label>
      <div class="col-sm-3 ui-fluid ui-fluid-no-padding">
        <input type="text" pInputText
               placeholder="选择报告人后自动显示"
               [(ngModel)]="reporter.organization"
               formControlName="reporterFather"
               class=" form-control cursor_not_allowed"
               readonly/>
      </div>
      <label  class="col-sm-1 control-label">联系电话：</label>
      <div class="col-sm-3 ui-fluid ui-fluid-no-padding">
        <input type="text" pInputText
               placeholder="选择报告人后自动显示"
               formControlName="reporterRemark"
               [(ngModel)]="reporter.mobile" readonly
               class=" form-control cursor_not_allowed"/>
      </div>
    </div>
    <div class="form-group ">
      <label class="col-sm-1 control-label">受理时间：</label>
      <div class="col-sm-3 ui-fluid ui-fluid-no-padding">
        <input type="text" pInputText
               placeholder="选择报告人后自动显示"
               formControlName="dealTime"
               [(ngModel)]="dealTime" readonly
               class=" form-control cursor_not_allowed"/>
        <!--<p-calendar [(ngModel)]="dealTime"-->
        <!--[showIcon]="true"-->
        <!--[locale]="zh"-->
        <!--name="end_time"-->
        <!--dateFormat="yy-mm-dd"-->
        <!--[required]="true"-->
        <!--[showTime]="true"-->
        <!--formControlName="dealTime">-->
        <!--</p-calendar>-->
      </div>
      <label class="col-sm-1 control-label">
        <span ngClass="start_red">*</span>
        发生时间：
      </label>
      <div class="col-sm-3 ui-fluid ui-fluid-no-padding">
        <p-calendar [(ngModel)]="occurTime"
                    [showIcon]="true"
                    [locale]="zh"
                    name="end_time"
                    dateFormat="yy-mm-dd"
                    [required]="true"
                    [showTime]="true"
                    formControlName="occurTime">
        </p-calendar>
      </div>
      <label class="col-sm-1 control-label">
        <span ngClass="start_red">*</span>
        最终期限：
      </label>
      <div class="col-sm-3 ui-fluid ui-fluid-no-padding">
        <input type="text" pInputText
               placeholder="影响度、紧急度、优先级后自动显示"
               [(ngModel)]="malDeadline"
               formControlName="malDeadline"
               class=" form-control cursor_not_allowed"
               readonly/>
      </div>
    </div>
    <div class="form-group ">
      <label class="col-sm-1 control-label">
        <span ngClass="start_red">*</span>
        影响度：
      </label>
      <div class="col-sm-3 ui-fluid ui-fluid-no-padding">
        <p-dropdown [options]="malImpactOptions"
                    [(ngModel)]="malImpact"
                    placeholder="请选择来源"
                    optionLabel="name"
                    (onFocus)="onFocus()"
                    formControlName="malImpact"
                    [style]="{'width':'100%'}"
        ></p-dropdown>
      </div>
      <label class="col-sm-1 control-label">
        <span ngClass="start_red">*</span>
        紧急度：
      </label>
      <div class="col-sm-3 ui-fluid ui-fluid-no-padding">
        <p-dropdown [options]="malUrgencyOptions"
                    [(ngModel)]="malUrgency"
                    placeholder="请选择来源"
                    optionLabel="name"
                    formControlName="malUrgency"
                    (onFocus)="onFocus()"
                    [style]="{'width':'100%'}"
        ></p-dropdown>
      </div>
      <label class="col-sm-1 control-label">优先级：</label>
      <div class="col-sm-3 ui-fluid ui-fluid-no-padding">
        <input type="text" pInputText
               placeholder="选择影响度和紧急度后自动显示"
               [(ngModel)]="malfPrority"
               formControlName="malfPrority"
               class=" form-control cursor_not_allowed"
               readonly/>
      </div>
    </div>
    <div class="form-group ">
      <label class="col-sm-1 control-label">故障级别：</label>
      <div class="col-sm-3 ui-fluid ui-fluid-no-padding">
        <p-dropdown [options]="malLevelOptions"
                    [(ngModel)]="malLevel"
                    placeholder="请选择故障级别"
                    optionLabel="name"
                    [ngModelOptions]="{standalone: true}"
                    [style]="{'width':'100%'}">
        </p-dropdown>
      </div>
      <label class="col-sm-1 control-label">
        <span ngClass="start_red">*</span>
        所属系统：
      </label>
      <div class="col-sm-3  ui-fluid-no-padding">
        <div class="col-sm-6 ui-fluid ui-fluid-no-padding">
          <input type="text" pInputText
                 name="" placeholder="请选择所属系统"
                 [(ngModel)]="belongSystem.label"
                 readonly class="cursor_not_allowed"
                 class=" form-control cursor_not_allowed"
                 formControlName="malLevel"/>
        </div>
        <div class="col-sm-3 ui-fluid-no-padding ui-padding-10px">
          <button ngClass="ui-g-12 ui-fluid-no-padding" pButton type="button" (click)="showTreeDialog('belongSystem')" label="选择"></button>
        </div>

        <div class="col-sm-3 ui-fluid-no-padding ui-padding-10px">
          <button ngClass="ui-g-12 ui-fluid-no-padding" pButton type="button" (click)="clearTreeDialog('belongSystem')" label="清空"></button>
        </div>
      </div>
      <label class="col-sm-1 control-label">发生地点：</label>
      <div class="col-sm-3  ui-fluid-no-padding">
        <div class="col-sm-6 ui-fluid ui-fluid-no-padding">
          <input type="text" pInputText
                 name="department"
                 placeholder="请选择发生地点"
                 [(ngModel)]="locationOccur.label" readonly
                 formControlName="belongSystemLabel"
                 class="form-control cursor_not_allowed"/>
        </div>
        <div class="col-sm-3 ui-fluid-no-padding ui-padding-10px">
          <button ngClass="ui-g-12 ui-fluid-no-padding" pButton type="button" (click)="showTreeDialog('locationOccur')" label="选择"></button>
        </div>
        <div class="col-sm-3 ui-fluid-no-padding ui-padding-10px">
          <button ngClass="ui-g-12 ui-fluid-no-padding" pButton type="button" (click)="clearTreeDialog('locationOccur')" label="清空"></button>
        </div>
      </div>
    </div>
    <div class="form-group ">
      <label class="col-sm-1 control-label">
        <span ngClass="start_red">*</span>
        故障标题：
      </label>
      <div class="col-sm-11 ui-no-padding-left-15px ui-fluid">
        <input type="text" pInputText
               placeholder="请填写故障标题"
               formControlName="malTitle"
               [(ngModel)]="malTitle"/>
      </div>
    </div>
    <div class="form-group ui-fluid">
      <label class="col-sm-1 control-label">
        <span ngClass="start_red">*</span>
        故障描述：
      </label>
      <div class="col-sm-11 ui-no-padding-left-15px ">
                 <textarea [rows]="5" pInputTextarea
                           autoResize="autoResize"
                           formControlName="malDesc"
                           [(ngModel)]="malDesc"></textarea>
      </div>
    </div>
    <div class="form-group ">
      <label class="col-sm-1 control-label">
        上传附件：
      </label>
      <div class="col-sm-11 ui-fluid-no-padding ">
        <p-fileUpload name="file" url="{{ip}}/workflow/trouble/upload"
                      multiple="multiple"
                      accept="image/*,application/*,text/*"
                      chooseLabel="选择"
                      uploadLabel="上传"
                      cancelLabel="取消"
                      maxFileSize="3145728"
                      (onUpload)="onUpload($event)"
                      (onBeforeUpload)="onBeforeUpload($event)"
                      #form>
          <ng-template pTemplate="content">
            <ul *ngIf="uploadedFiles.length">
              <li *ngFor="let file of uploadedFiles">{{file.name}} - {{file.size}} bytes</li>
            </ul>
          </ng-template>
        </p-fileUpload>
      </div>
    </div>
    <div class="form-group ">
      <label class="col-sm-1 control-label">
        关联服务目录：
      </label>
      <div class="col-sm-11 ui-fluid-no-padding">
        <div class="col-sm-10 ui-fluid ui-fluid-no-padding">
          <input type="text" pInputText
                 name="department" placeholder="请选择关联服务目录"
                 formControlName="relativeCategoreLabel"
                 [(ngModel)]="relativeCategore.label" readonly
                 class="form-control cursor_not_allowed"/>
        </div>
        <div class="col-sm-1 ui-fluid-no-padding ui-padding-10px">
          <button ngClass="ui-g-12 ui-fluid-no-padding" pButton type="button" (click)="showTreeDialog('relativeCategore')" label="选择"></button>
        </div>
        <div class="col-sm-1 ui-fluid-no-padding ui-padding-10px">
          <button ngClass="ui-g-12 ui-fluid-no-padding" pButton type="button" (click)="clearTreeDialog('relativeCategore')" label="清空"></button>
        </div>
      </div>
    </div>
    <div class="form-group ">
      <label  class="col-sm-1 control-label">
        关联设备编号：
      </label>
      <div class="col-sm-11 ui-fluid-no-padding">
        <div class="col-sm-10 ui-fluid ui-fluid-no-padding">
          <input type="text" pInputText
                 name="department" placeholder="请选择关联设备编号"
                 formControlName="relativeEquipLabel"
                 [(ngModel)]="relativeEquip.label" readonly
                 class="form-control cursor_not_allowed"/>
        </div>
        <div class="col-sm-1 ui-fluid-no-padding ui-padding-10px">
          <button ngClass="ui-g-12 ui-fluid-no-padding" pButton type="button" (click)="showTreeDialog('relativeEquip')" label="选择"></button>
        </div>
        <div class="col-sm-1 ui-fluid-no-padding ui-padding-10px">
          <button ngClass="ui-g-12 ui-fluid-no-padding" pButton type="button" (click)="clearTreeDialog('relativeEquip')" label="清空"></button>
        </div>
      </div>
    </div>
    <div class="form-group ">
      <label class="col-sm-1 control-label">
        <span ngClass="start_red">*</span>
        分配至部门：
      </label>
      <div class="col-sm-5 ui-fluid-no-padding">
        <div class="col-sm-8 ui-fluid ui-fluid-no-padding">
          <input type="text" pInputText  name="department"
                 placeholder="请选择部门"
                 [(ngModel)]="selectedDepartment.label" readonly
                 formControlName="selectedDepartmentLabel"
                 class="form-control cursor_not_allowed"/>
        </div>
        <div class="col-sm-2 ui-fluid-no-padding ui-padding-10px">
          <button ngClass="ui-g-12 ui-fluid-no-padding"  pButton type="button" (click)="showTreeDialog('selectedDepartment')" label="选择"></button>
        </div>
        <div class="col-sm-2 ui-fluid-no-padding ui-padding-10px">
          <button  ngClass="ui-g-12 ui-fluid-no-padding" pButton type="button" (click)="clearTreeDialog('selectedDepartment')" label="清空"></button>
        </div>
      </div>
      <label class="col-sm-1 control-label">分配至个人：</label>
      <div class="col-sm-5 ui-fluid-no-padding">
        <p-dropdown [options]="malDepPersonOptions"
                    [(ngModel)]="malDepPerson"
                    formControlName="malDepPerson"
                    placeholder="请选择人员"
                    [style]="{'width':'100%'}"
                    optionLabel="name"></p-dropdown>
      </div>
    </div>
    <div class="form-group ">
      <div class="col-sm-12 ui-no-padding-left-15px ui-no-padding-right-15px">
        <button class="pull-right  ui-button-secondary" pButton type="button" [routerLink]="['/index/maintenance/malfunctionBase']" label="关闭" [disabled]="saved"></button>
        <button class="pull-right ui-margin-right-10px" pButton type="button" (click)="submitAndDistribute ()" label="保存并分配" [disabled]="hadSaved"></button>
        <button class="pull-right ui-margin-right-10px" pButton type="button" (click)="submitTrick()" label="提交" [disabled]="hadSaved"></button>
        <button  class="pull-right ui-margin-right-10px" pButton type="button" (click)="save()" label="保存" [disabled]="hadSaved"></button>

      </div>
    </div>
  </form>
  <p-dialog header="{{ dialogHeader }}" [(visible)]="departementDisplay" modal="modal" width="300" [responsive]="true">
    <p-tree [value]="filesTree4"
            selectionMode="{{ selectedMode }}"
            [(selection)]="selected"
            (onNodeExpand)="nodeExpand($event)"
            (onNodeSelect)="nodeSelect($event)"
    ></p-tree>
    <!--<div>Selected Nodes: <span *ngFor="let file of selected">{{file.label}} </span></div>-->
    <div style="margin-top:8px">Selected Node: {{selected ? selected.label : 'none'}}</div>
    <p-footer>
      <button type="button" pButton icon="fa-check" (click)="closeTreeDialog()" label="确定"></button>
      <button type="button" pButton icon="fa-close" (click)="departementDisplay=false"
              class="ui-button-secondary" label="取消"></button>
    </p-footer>
  </p-dialog>
  <app-personel-dialog *ngIf="displayPersonel"
                       (dataEmitter)="dataEmitter($event)"
                       (displayEmitter)="displayEmitter($event)"></app-personel-dialog>
  <p-growl [(value)]="message"></p-growl>

</div>
